<template>
	<view class="">
		<view class="select-box">
				<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
		</view>
		<view class="dates-box ">
			<view style="width: 100%;" class="dates f-row-between">
				<view
					class="date f-center"
					:style="{ width: 100 / 4 - 3 + '%' }"
					:class="selected == 'd' ? 'selected' : ''"
					@click="selected = 'd'"
				>
					今日
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 4 - 3 + '%' }"
					
					:class="selected == 'zr' ? 'selected' : ''"
					@click="selected = 'zr'"
				>
					昨日
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 4 - 3 + '%' }"
					:class="selected == 'z' ? 'selected' : ''"
					@click="selected = 'z'"
				>
					本周
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 4 - 3 + '%' }"
					:class="selected == 'm' ? 'selected' : ''"
					@click="selected = 'm'"
				>
					本月
				</view>
			</view>
			<sun-Dates  :selected="selected" @onSubmit="onSubmitDate"></sun-Dates>
		</view>
		
		<view class="f-row-Wcenter" style="width: 100%;">
			<view class="analysis-box">
				<view class="analysis-item" @click="topage('/pages/statistics/retailStatistics/retailStatistics')">
					<view class="title-box f-center">
						<label>销售分析</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>销售额：{{resData.sale_amt | toFIex}}</label>
						<label>毛利额：{{resData.ml_amt | toFIex}}</label>
						<label>毛利率：{{resData.ml_rate | toFIex}}%</label>
					</view>
				</view>
				<view class="analysis-item" @click="topage('/pages/statistics/guestOrder/guestOrder')">
					<view class="title-box f-center">
						<label>客单分析</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>客单数：{{resData.cust_nums | toFIex}}</label>
						<label>客单价：{{resData.cust_prc | toFIex}}</label>
					</view>
				</view>
				<view class="analysis-item" @click="topage('/pages/statistics/goodsSort/goodsSort')">
					<view class="title-box f-center">
						<label>商品排行</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>商品：{{resData.item_name || ''}}</label>
						<label>类别：{{resData.cls_name || ''}}</label>
						<label>品牌：{{resData.brand_name || ''}}</label>
						<label>货商：{{resData.sup_name || ''}}</label>
					</view>
				</view>
				<view class="analysis-item"  @click="topage('/pages/statistics/vip/vip')"> 
					<view class="title-box f-center">
						<label>会员分析</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>新增会员：{{resData.new_vip | toFIex}}</label>
						<label>充值金额：{{resData.fill_amt | toFIex}}</label>
						<label>消费金额：{{resData.vippay_amt | toFIex}}</label>
						<label>消费占比：{{resData.vippay_rate | toFIex}}%</label>
					</view>
				</view>
				<view class="analysis-item"  @click="topage('/pages/statistics/retailReturn/retailReturn')">
					<view class="title-box f-center">
						<label>销售退货</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>退货数量：{{resData.ret_nums | toFIex}}</label>
						<label>退货金额：{{resData.ret_amt | toFIex}}</label>
					</view>
				</view>
				<view class="analysis-item" @click="topage('/pages/statistics/purchasing/purchasing')">
					<view class="title-box f-center">
						<label>采购入库</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>入库数量：{{resData.pi_qty | toFIex}}</label>
						<label>入库金额：{{resData.pi_amt | toFIex}}</label>
					</view>
				</view>
				<view class="analysis-item" @click="topage('/pages/statistics/shop/shop')">
					<view class="title-box f-center">
						<label>门店分析</label>
						<label class="icons iconarrow-right"></label>
					</view>
					<view class="total-box f-column-Hcenter">
						<label>营业额：{{resData.branchsale_amt | toFIex}}</label>
						<label>毛利额：{{resData.branchml_amt | toFIex}}</label>
						<label>毛利率：{{resData.branchml_rate | toFIex}}%</label>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api_server from '@/api/api_server.js';
import sunDate from '@/components/sun-Dates/sun-Dates.vue'
export default {
	components: {
		sunDate
	},
	data() {
		return {
			selected :'d',
			query: {
				branch_jg: '%', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
			},
			resData:{}
		};
	},
	onLoad() {
		this.getlogin();
	},
	onShow() {},
	methods: {
		onSubmitAddress(e) {
			this.query.branch_jg = e.address.branch_no;
			this.query.branch_name = e.address.branch_name;
			this.getlogin();
		},
		onSubmitDate(e){
			this.query={...this.query,...e}
			this.getlogin();
		},
		getlogin(){
			let query =this.query;
			// query.end_date= 1609372800000;
			// query.start_date= 1577808000000;
			api_server.dwzy_GetAppAllAnalysis({
				data: {Params:query},
				success: res => {
					if(res.data){
						this.resData = res.data.data[0];
					}
				}
			})
		},
		onDate(type) {
			this.selected = type;
		},
		onSelectChange(e) {
			console.log(e);
		},
		topage(pages) {
			console.log(pages);
			uni.navigateTo({ url: pages });
		}
	}
};
</script>

<style lang="scss">
.select-box {
	width: 100%;
	padding: 0 30upx;
}
.dates-box {
	height: 88upx;
	border-radius: 20upx 20upx 0 0;
	padding: 20upx 30upx 0 30upx;
	background-color: rgba($color: #ffffff, $alpha: 1);
}
.analysis-box {
	border-radius: 0 0 20upx 20upx;
	background-color: rgba(245, 255, 255, 1);

	padding: 15upx;
	.analysis-item {
		margin: 10upx 18upx;
		width: 45.25%;
		float: left;
		box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);
		border-radius: 39upx 39upx 6upx 6upx;
		.title-box {
			width: 100%;
			height: 100%;
			color: #f1f1f1; 
			height: 76upx;
			background: #128a80;
			border-radius: 39upx 39upx 0 0;

			label:nth-of-type(1) {
				margin-left: 25%;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
			label:nth-of-type(2) {
				margin-left: 20%;
				font-size: 30upx;
			}
		}
		.total-box {
			height: 198upx;
			label {
				margin-left: 30upx;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3f3e3e;
				line-height: 50upx;
				
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
